<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web08</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script>
            $(function(){  //페이지 로딩 후에 실행하라.
                $("#fadein").click(function(){
                    //0.6 초 동안 화면에 나타난 후 펑션 실행.
                    $("p").fadeIn("slow",function(){
                        $("#fadein").css("color","red");
                    });
                    /* slow 0.6  normal 0.4  fast 0.2    */
                });
                $("#fadeout").click(function(){
                    $("p").fadeOut("fast",function(){
                        $("#fadein").css("color","blue");
                    });
                });
                //대상을 클릭하면 펑션이 실행되도록 셋팅.
                $("#fadetoggle").bind("click",function(){
                    //fadeOut  <-> fadeIn
                    $("p").fadeToggle("slow",function(){
                        
                    });
                });
                //$(selector).fadeTo(speed,opecity,callback);
                //opacity 불투명도 0 (투명 )~ 1(불투명 )
                $("#ft2").bind("click",function(){
                    $("p").fadeTo("slow",0.2,function(){})
                })
                $("#ft7").bind("click",function(){
                    $("p").fadeTo("slow",0.7,function(){})
                });
                
                
                
                
                $("#m1").click(function(){
                    $("#o1").fadeToggle("slow",function(){})
                })
                $("#m2").click(function(){
                    $("#o2").fadeToggle("slow",function(){})
                });
                $("#o1").fadeOut(1);
                $("#o2").fadeOut(1);
                
                
                // $(".menu1").fadeOut(1);
                // $(".menuTitle1").click(function(){
                    // $(".menu1").fadeToggle(1);
                // });
                
                //[속선네임 ] 존재하면 선택한다.
                $("[name]").css("color","blue");
                //attributeContainsPrefix selector
                //jQuery("[attribute|='value]")
                //code-  (quoted string)
                //해당 벨류로 시작되는것.
                jQuery("[name|='code']").css("color","red");
                //Attribute Contains Selector 포함하면 선택.
                $("[name*='co']").css("text-decoration","underline");
                //Attribute Contains Word Selector
                //단독으로 떨어져 있는 단어가 있으면 선택.
                $("[name~='j']").css("font-size","1.5em");
                //Attribute Ends With Selector  j로 끝나면 선택 
                $("[name$='j']").css("background-color","yellow");
                //name이 반드시 코드여야만 선택.
                $("[name='code']").css("background-color","green");
                //Attribute Start With Selector  : code로 시작하면 선택.
                $("[name^='code']").css("padding","10px");
                console.log($("[name^='code']"))
                
                //Child Selector ("parent > child")
                $("ol#grand >li").css("font-size","1.5em");
                //:eq()  Selector   :eq(index)
                //li:eq(0) - 가장 앞에 있는 li를 선택해라 
                $("li:eq(0)").css("color","red");
                $("li:eq(1)").css("color","blue");
                //li중에서 index <2 인것을 선택 
                $("li:lt(2)").css("text-decoration","underline");
                //lin중에서 index <2 인것을 선택 
                $("li:gt(2)").css("text-decoration","overline");
                //eq(-1) li에서 맨끝에 있는것을 선택해라.
                $("li:eq(-1)").css("color","gold");
                //:has()  Selector      자식중
                $("ol:has(li)").css("background-color","#dddddd");
                $("ol:has(li)").css("border","1px solid black");  
                //:first-of-type  Selector
                //각각의 부모를 갖는 첫번째 tr을 찾아라.
                $("tr:first-of-type").css("background-color","#ffdddd");
                
                //Next Adjacent Selector ("prev + next")
                //prev + next 는 꼭 붙어 있어야 하고,
                //적용되는 대상은 next 만 
                $("[name='code'] + [name='code-2']").css("font-style","italic");
                
                //Next Siblings Selector ("prev~ siblings")
                //첫번째 테이블의 다음 현제 table을 선택 
                $("table:first~ table").css("border","1px solid black");
                
               //메뉴 처리를 하자.
                $("div + ol").fadeOut(1);
                //div(메뉴 )를 클릭하면 바로 다음에 있는 ol 이 fadeToggle 되도록 
                $("div").click(function(){
                    //.next()는 다음 형제를 선택해라.
                    $("this").next().fadeToggle();
                }); 
                //선택자의 종류 $() ,  메서드()  두종류가 있다. 앞의 걸로 안될때는 메서드()로 사용.
                //:nth-child()   Selector
                //td는 자식이 1개뿐이므로...
                //table
                $("table:nth-child(even)").css("color","blue");
                $("table:nth-child(odd)").css("color","purple");
                //3n    3, 6, 9, ....배수 
                $("table:nth-child(3n)").css("color","green");
                //nth-child()는 1부터 시작 한다.
                $("table:nth-child(1)").css("color","yellow");
                
                
            });
            
        </script>
   <style>
       d{font-style:italic}
   </style>
    </head>

    <body>
        <table>
            <tr><td>이름 </td></tr>
            <tr><td>김  </td></tr>
            <tr><td>리  </td></tr>
        </table>
         <table>
            <tr><td>사는곳  </td></tr>
            <tr><td>부산   </td></tr>
            <tr><td>서울   </td></tr>
        </table>
        
        
        
        <ol>자식이 없는 ol</ol>
        &lt;여는태그  &gt; 닫는태그 
        <ol id="grand">
            <li>ol의 첫번째 직계자식 </li>
            <li>ol의 첫번째 직계자식
            </li>
                <ol>
                      <li>부모 ol의 첫번째 손자 </li>                     
                      <li>부모 ol의 두번째 손자 </li>
                </ol>
        </ol>
        <div name="code">선택자 연습 </div>
        <div name="code-2">선택자 연습 </div>
        <div name="code j">code j</div>
        <div name="code-2j">code 2j</div>
        <span id="ft2">fadeTo opacity=0.2</span>
        <span id="ft7">fadeTo opacity=0.7</span>
        <h4 id="fadetoggle">fadeToggle</h4>
        <h4 id="fadein">fadeIn</h4>
        <h4 id="fadeout">fadeOut</h4>
        
      <p>jQuery가 1.9로 업데이트 되었습니다.</p>
      
        <div id="m1">메뉴1</div>
        <ol id="o1"><li>배경회색 </li><li>배경 하얀색 </li>            
        </ol>
        <div id="m2">메뉴2</div>
        <ol id="o2"><li>배경검은색 </li><li>배경 푸른색 </li>           
        </ol>
        
        
        
        
        
        
        
        
    </body>
</html>
